<template>
  <div>
    <div class="head">
      <img src="@/assets/dike.png" alt="" />
      <div class="right">
        <img src="@/assets/download.png" class="tou" alt="" />
        <span>欢迎您,admin</span>
        <i class="tui">退出 <i class="el-icon-caret-bottom"></i> </i>
      </div>
    </div>
    <el-row>
      <el-col :span="3">
        <el-menu default-active="1" class="el-menu-vertical-demo">
          <el-menu-item index="1">
            <i class="el-icon-price-tag"></i> 帝可得</el-menu-item
          >
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-tickets"></i>
              <span>工单管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1">运营工单</el-menu-item>
              <el-menu-item index="1-2">运维工单</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-map-location"></i>
              <span>点位管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="2-1">区域管理</el-menu-item>
              <el-menu-item index="2-2">点位管理</el-menu-item>
              <el-menu-item index="2-3">合作商管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-collection"></i>
              <span>设备管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="3-1">设备管理</el-menu-item>
              <el-menu-item index="3-2">设备状态</el-menu-item>
              <el-menu-item index="3-2">设备类型管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-tickets"></i>
              <span>人员管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="4-1">运营工单</el-menu-item>
              <el-menu-item index="4-2">运维工单</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="6">
            <template slot="title">
              <i class="el-icon-brush"></i>
              <span>商品管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="5-1">商品类型</el-menu-item>
              <el-menu-item index="5-2">商品管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item index="7">
            <i class="el-icon-female"></i> 策略管理</el-menu-item
          >
          <el-menu-item index="8">
            <i class="el-icon-notebook-2"></i> 订单管理</el-menu-item
          >
          <el-menu-item index="9">
            <i class="el-icon-document-checked"></i> 对账统计</el-menu-item
          >
        </el-menu>
      </el-col>
      <el-col :span="16">
        <div class="ka">
          <div class="left">
            <div class="gong">
              工单统计&nbsp;<span>2022.11.01~2022.11.21</span>
            </div>

            <el-col class="elo" :span="6"
              >402
              <p class="da">工单总数(个)</p></el-col
            >
            <el-col class="elo" :span="6"
              >0
              <p class="da">完成工单(个)</p></el-col
            >
            <el-col class="elo" :span="6"
              >0
              <p class="da">进行工单(个)</p></el-col
            >
            <el-col class="elo" :span="6"
              >397
              <p class="da">取消工单(个)</p></el-col
            >
          </div>
          <div class="right">
            <div class="xiao">
              销售统计&nbsp;<span>2022.11.01~2022.11.21</span>
            </div>
            <div class="shou">
              <el-col class="wanc" :span="12"
                >9848
                <p>订单量(个)</p></el-col
              >
              <el-col class="wanch" :span="12"
                >6.92
                <p>销售额(万元)</p></el-col
              >
            </div>
          </div>
        </div>
          <div id="main" style="width: 600px;height:400px;"></div>
      </el-col>
      <el-col :span="5">
        <el-card class="box-card">
          <div class="clearfix">
            <span>商品热榜 <i>2022.11.01~2022.11.20</i></span>
            <div class="liebiao">
              <i class="one">1</i> <label class="wenzi">康师傅冰红茶</label
              ><span>990单</span>
            </div>
            <div class="liebiao">
              <i class="two">2</i> <label class="wenzi">怡宝</label
              ><span class="yi">986单</span>
            </div>
            <div class="liebiao">
              <i class="three">3</i> <label class="wenzi">茉莉花茶</label
              ><span class="mo">983单</span>
            </div>
            <div class="liebiao">
              <i class="pink">4</i> <label class="wenzi">100橙汁自然纯</label
              ><span class="cheng">948单</span>
            </div>
            <div class="liebiao">
              <i class="pink">5</i> <label class="wenzi">统一阿萨姆奶茶</label
              ><span class="tong">910单</span>
            </div>
            <div class="liebiao">
              <i class="pink">6</i> <label class="wenzi">可口可乐</label
              ><span class="ke">874单</span>
            </div>
            <div class="liebiao">
              <i class="pink">7</i> <label class="wenzi">星巴克</label
              ><span class="xing">873单</span>
            </div>
            <div class="liebiao">
              <i class="pink">8</i> <label class="wenzi">青梅绿茶</label
              ><span class="qing">825单</span>
            </div>
            <div class="liebiao">
              <i class="pink">9</i>
              <label class="wenzi">A酷儿橙汁&nbsp;1.5L</label><span>541单</span>
            </div>
            <div class="liebiao">
              <i class="pink">10</i> <label class="wenzi">泡面1</label
              ><span class="pao">491单</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// import * as echarts from 'echarts'
import { taskReportInfo } from '@/api/user'
// var option
export default {
  // async created() {
  //   const time = new Date().toLocaleString()
  //   const end = time.replace(/\//g, '-')
  //   // const end = '2022-11-20 23:59:59'
  //   const start = '2022-11-01 00:00:00'
  //   const res = await gong({ start, end })
  //   console.log(res)
  // },
  data(){
  },
  created( ){
    this.getReportInfo();
  },
  methods: {
    //获取当时工单汇总信息
    
    getReportInfo(){
      
      let params = {
        start:"2020-01-01 00:00:00",
        end:"2020-01-01 23:59:59",
      }
      taskReportInfo(params).then((res) => {
        console.log(res);
      })
    },
  //   mounted:{

  //     option = {
  //     tooltip: {
  //         trigger: 'axis'
  //     },
  //     xAxis: [{
  //         type: 'category',
  //         data: ['2019-01','2019-02','2019-03','2019-04','2019-05','2019-06'],
  //         axisLine: {
  //             lineStyle: {
  //                 color: "#999"
  //             }
  //         }
  //     }],
  //     yAxis: [{
  //         type: 'value',
  //         splitNumber: 4,
  //         splitLine: {
  //             lineStyle: {
  //                 type: 'dashed',
  //                 color: '#DDD'
  //             }
  //         },
  //         axisLine: {
  //             show: false,
  //             lineStyle: {
  //                 color: "#333"
  //             },
  //         },
  //         nameTextStyle: {
  //             color: "#999"
  //         },
  //         splitArea: {
  //             show: false
  //         }
  //     }],
  //     series: [{
  //         name: '课时',
  //         type: 'line',
  //         data: [23,60,20,36,23,85],
  //         lineStyle: {
  //             normal: {
  //                 width: 8,
  //                 color: {
  //                     type: 'linear',
  
  //                     colorStops: [{
  //                         offset: 0,
  //                         color: '#A9F387' // 0% 处的颜色
  //                     }, {
  //                         offset: 1,
  //                         color: '#48D8BF' // 100% 处的颜色
  //                     }],
  //                     globalCoord: false // 缺省为 false
  //                 },
  //                 shadowColor: 'rgba(72,216,191, 0.3)',
  //                 shadowBlur: 10,
  //                 shadowOffsetY: 20
  //             }
  //         },
  //         itemStyle: {
  //             normal: {
  //                 color: '#fff',
  //                 borderWidth: 10,
  //                 /*shadowColor: 'rgba(72,216,191, 0.3)',
  //                 shadowBlur: 100,*/
  //                 borderColor: "#A9F387"
  //             }
  //         },
  //         smooth: true
  //     }]
  // }
  //   }
  }

            }

</script>

<style lang="less" scoped>
.shuju {
  margin-top: 10px;
  margin-left: 10px;
  span {
    font-size: 10px;
    color: gray;
  }
}
.one {
  color: yellow;
}
.two {
  color: #303133;
}
.three {
  color: #cf6d3d;
}
.head {
  position: relative;
  justify-content: space-between;
  display: flex;
  width: 100%;
  height: 60px;
  background-color: rgb(83, 115, 224);
  img {
    width: 88px;
    height: 36px;
    display: block;
    padding-top: 15px;
    padding-left: 20px;
  }
}
.right {
  display: flex;
  width: 300px;
  // background-color: green;
  img {
    width: 35px;
    height: 35px;
    text-align: center;
  }
  span {
    margin-left: 20px;
    margin-top: 20px;
    font-size: 16px;
    text-align: center;
    line-height: 20px;
    color: #ffffff;
  }
  .tui {
    color: #ffffff;
    margin-left: 20px;
    margin-top: 20px;
    font-size: 16px;
    text-align: center;
    line-height: 20px;
  }
}
.el-submenu .el-menu-item {
  height: 36px;
  line-height: 12px;
  padding: 0 45px;
  min-width: 200px;
}
.el-submenu__title {
  height: 49px;
  font-size: 14px;
  color: #303133;
  cursor: pointer;
  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
  box-sizing: border-box;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.box-card {
  padding: 5px 0 0 0;
  height: 440px;
}
.clearfix {
  padding-top: -10px;
  // font-size: 18px;
  span {
    font-size: 14px;
    color: gray;
  }
  i {
    font-size: 12px;
  }
}
.liebiao {
  margin-top: 18px;
  i {
    margin-right: 20px;
  }
  span {
    color: gray;
    font-size: 14px;
  }
  .wenzi {
    font-size: 16px;
    margin-right: 66px;
  }
}
.yi {
  margin-left: 66px;
}
.mo {
  margin-left: 35px;
}
.cheng {
  margin-left: -7px;
}
.tong {
  margin-left: -8px;
}
.ke {
  margin-left: 40px;
}
.xing {
  margin-left: 57px;
}
.qing {
  margin-left: 40px;
}
.pao {
  margin-left: 66px;
}
.pink {
  color: pink;
}
.ka {
  display: flex;
  // margin-right: 500px;

  .left {
    border-radius: 20px;
    p {
      font-weight: normal;
      margin-top: 10px;
      font-size: 6px;
    }
    margin-top: 20px;
    // background-color: rgb(233, 243, 255);
    background: url(@/assets/right1.png), url(@/assets/right.png);
    background-repeat: no-repeat, no-repeat;
    background-position: 0 0, calc(100% - 12px) 100%;
    margin-left: 10px;
    width: 450px;
    height: 150px;
    .gong {
      margin-top: 10px;
      margin-left: 10px;
      span {
        font-size: 10px;
        color: gray;
      }
    }
    .elo {
      font-weight: 700;
      margin-top: 20px;
      font-size: 10px;
      margin-left: 5px;
      margin-right: -10px;
      text-align: center;
      color: rgb(7, 32, 116);
      font-size: 30px;
    }
  }
  .right {
    border-radius: 20px;
    .shou {
      margin-top: 50px;

      .wanc {
        font-weight: 700;
        margin-left: -130px;
        font-size: 30px;
        color: rgb(255, 87, 87);
      }
      .wanch {
        font-weight: 700;
        font-size: 30px;
        color: rgb(255, 87, 87);
        margin-left: 80px;
      }
      p {
        font-size: 6px;
        margin-top: 10px;
        font-weight: normal;
      }
    }
    margin-top: 20px;
    margin-left: 10px;
    width: 450px;
    height: 150px;
    background: #fbefe8 url(@/assets/left.png) no-repeat calc(100% - 12px) 100%;
    span {
      font-size: 10px;
      color: gray;
      margin-left: 10px;
    }
    .xiao {
      margin-top: 10px;
      margin-left: 10px;
    }
  }
}
</style>
